<template>
	<view class="profit-wrap page-bg">
		<!-- <view class="cash-money desc">累计提现金额： 99元</view> -->

		<none v-if='items.length <= 0' :img='icon_none' text='暂时还没有任何提现记录!'></none>

		<view class="mine-list" v-else>
			<view class="mine-item-wrap" v-for="item in items" :key='item.id'>
				<view class="mine-item">
					<image class="mine-item__avatar" src="../../static/common/icon_28.png" mode=""></image>
					<view class="mine-item__info">
						<view class="mine-item__title">余额提现</view>
						<view class="mine-item__time">{{item.creationTime | formatTime}}</view>
					</view>
					<view class="mine-item__cash">
						<view class="mine-item__amount">-{{item.amount | formatMoney}}</view>
						<view class="mine-item__status orange theme">{{item.statusView}}</view>
					</view>
				</view>
				<view v-if="item.reason" class="mine-cash__reson theme">驳回原因：{{item.reason}}</view>
			</view>
			<!-- <view class="mine-item-wrap">
				<view class="mine-item">
					<image class="mine-item__avatar" src="../../static/common/icon_28.png" mode=""></image>
					<view class="mine-item__info">
						<view class="mine-item__title">余额提现</view>
						<view class="mine-item__time">{{'2012-12-12 12:12T:'| formatTime}}</view>
					</view>
					<view class="mine-item__cash">
						<view class="mine-item__amount">-100</view>
						<view class="mine-item__status theme">恶意操作恶意操作</view>
					</view>
				</view>
				<view class="mine-cash__reson theme">驳回原因：博惠苑</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import icon_none from '../../static/common/icon_none_02.png'
	import none from '../../components/none.vue'
	import common from '../../utils/common.js'
	import {
		api
	} from '../../utils/api.js'
	export default {
		data() {
			return {
				icon_none,
				items: [],
				pageSize: 10,
				pageIndex: 1,
				totalCount: 0,
				type: 2
			}
		},
		onLoad(options) {
			this.type = options.type
			this.getItems()
		},
		methods: {
			getItems() {
				let {
					pageIndex,
					pageSize,
					type
				} = this.$data
				let items = api.userCashRecord({
					pageIndex,
					pageSize,
					type
				}, (res) => {
					console.log(res)
					this.totalCount = res.totalCount
					this.items = [...this.items, ...res.items]
				})
			}
		},
		onReachBottom() {
			if (this.pageindex * this.pageSize > this.totalCount) {
				this.text = '已经没有更多了~'
			} else {
				this.pageIndex++
				this.getItems()
			}
		},
		components: {
			none
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.profit-wrap {
		.content-30;
	}

	.cash-money {
		text-align: center;
		margin-bottom: 20rpx;
	}

	.none-wrap {
		position: relative;

		.none {
			position: unset;
		}
	}

	.mine-list {
		.mine-item {
			background-color: @f;
			.br;
			.content-20;
			margin-bottom: 20rpx;
			.flex-base;

		}

		.mine-item__avatar {
			width: 53rpx;
			height: 53rpx;
			border-radius: 100%;
			flex-shrink: 0;
		}

		.mine-item__info {
			padding: 0 20rpx;
			box-sizing: border-box;
			flex-grow: 2;
		}

		.mine-item__title {
			.f30;
		}

		.mine-item__time {
			.f24;
			color: @font-dark-color;
			margin-top: 10rpx;
		}

		.mine-item__profit {
			.f32;
			color: @theme-color;
			width: 150rpx;
			.text-overflow;
			text-align: right;
		}

		.mine-item__cash {
			text-align: right;
		}

		.mine-item__amount {
			.f32;
			.fw;
		}

		.mine-item__status {
			.f24
		}

		.mine-item__reason {

			.f24;

		}
	}

	.mine-item-wrap {
		background-color: @f;
		padding-bottom: 20rpx;
		.br;
		margin-bottom: 20rpx;
		.mine-item {
			padding-bottom: 0;
		}

		.mine-cash__reson {
			padding: 0 20rpx;
			box-sizing: border-box;
			.f24;
			padding-left: 90rpx;
			margin-top: 10rpx;
		}
	}
</style>
